Hey all,
I have a div displayed as a block with an onclick event that shows/
hides a different div underneath it. There is a link within the first
div that takes the user to a different page. My problem is that if the
user clicks the link, the onclick is also executed and the div
underneath is shown/hidden before the browser changes pages, which
makes things a little clunky looking. Is there any way to keep the
div's onclick from firing when the link is clicked? Here is some
example source of what I'm talking about:
<div style="display: block; width: 200px;" onclick="show_hide
('div2');">Some text with a <a href="otherpage.htm">link</a></div>
<div id="div2">Some other text</div> 9 10011
On Nov 18, 8:02*am, skult...@gmail.com wrote:
Hey all,
I have a div displayed as a block with an onclick event that shows/
hides a different div underneath it. There is a link within the first
div that takes the user to a different page. My problem is that if the
user clicks the link, the onclick is also executed and the div
underneath is shown/hidden before the browser changes pages, which
makes things a little clunky looking. Is there any way to keep the
div's onclick from firing when the link is clicked? Here is some
example source of what I'm talking about:
<div style="display: block; width: 200px;" onclick="show_hide
('div2');">Some text with a <a href="otherpage.htm">link</a></div>
<div id="div2">Some other text</div>
Pass event and a reference to the div from the listener. In the
show_hide function, only hide the element if e.target/srcElement is
the div, e.g.
<script src="text/javascript">
function showHide(e, el, id) {
var tgt, el2;
if (e) {
var tgt = e.target || e.srcElement;
while (tgt && tgt.nodeType != 1) {
tgt = tgt.parentNode;
}
}
if (tgt == el) {
el2 = document.getElementById(id);
if (el2 && el2.style) {
el2.style.display =
(el2.style.display == 'none')? '' : 'none';
}
}
}
</script>
<div style="display: block; width: 200px;" onclick="
showHide(event, this, 'div2');
">Some text with a <a href="otherpage.htm">link</a></div>
<div id="div2">Some other text</div>
--
Rob
On 17 nov, 20:02, skult...@gmail.com wrote:
makes things a little clunky looking. Is there any way to keep the
div's onclick from firing when the link is clicked? Here is some
example source of what I'm talking about:
Yes.
Place this inside your onclick handler:
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
ps: I'm supposing that you know that the "e" var represents an Event
[1] here, and how event handlers work in DOM Level2. http://www.w3.org/TR/DOM-Level-2-Eve...s-registration
Cheers
--
Gabriel Gilini
On Nov 18, 9:48*am, Gabriel Gilini <gabr...@usosim.com.brwrote:
On 17 nov, 20:02, skult...@gmail.com wrote:
makes things a little clunky looking. Is there any way to keep the
div's onclick from firing when the link is clicked? Here is some
example source of what I'm talking about:
Yes.
Place this inside your onclick handler:
Too late, the click has already reached the div. Cancelling bubbling
then won't stop the div from responding, however it will stop other
elements further up the DOM tree from responding.
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
Presuming e was passed to the function in the first place. Since the
example was an in-line listener, event must be passed explicitly. And
since you want to stop propagation beyond the A element, the listener
must be on that, not the div.
ps: I'm supposing that you know that the "e" var represents an Event
Only if you assign it. Here's a simplistic working example using your
suggestion:
<script type="text/javascript">
function show_hide(id) {
var es = document.getElementById(id).style;
es.display = es.display == 'none'? '':'none';
}
function cancelProp(e) {
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
</script>
<div style="display: block; width: 200px;" onclick="
show_hide('div2');
">Some text with a <a href="otherpage.htm" onclick="
cancelProp(event);
">link</a></div>
<div id="div2">Some other text</div>
--
Rob
RobG wrote:
On Nov 18, 9:48 am, Gabriel Gilini <gabr...@usosim.com.brwrote:
>On 17 nov, 20:02, skult...@gmail.com wrote:
>>makes things a little clunky looking. Is there any way to keep the div's onclick from firing when the link is clicked? Here is some example source of what I'm talking about:
Yes.
Place this inside your onclick handler:
Too late, the click has already reached the div. Cancelling bubbling
then won't stop the div from responding, however it will stop other
elements further up the DOM tree from responding.
Easy way.
Replace the <A HREFwith a div with its own click handler which simply
chains to another program. Although the event would bubble up to the
containing div, my guess is that it will execute the 'nearest' event
first, and since that cause the window to exit, you should escape before
it changes it. Or use the local event to set a flag which the outer
level event handler can read and use to modify its behaviour.
In fact that may be simplest of all.
Add an onclick handler to the <aelement (or a container for it), that
sets a flag global flag, which if read as true by the outer onclick
handler, causes it to exit soundlessly.
On Nov 17, 10:46*pm, RobG <rg...@iinet.net.auwrote:
Place this inside your onclick handler:
Too late, the click has already reached the div. *Cancelling bubbling
then won't stop the div from responding, however it will stop other
elements further up the DOM tree from responding.
True, I overlooked it.
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
Presuming e was passed to the function in the first place. *Since the
example was an in-line listener, event must be passed explicitly. *And
since you want to stop propagation beyond the A element, the listener
must be on that, not the div.
Same as before, I was thinking about the A element.
[snip]
Cheers
--
Gabriel Gilini
On Nov 18, 8:52*am, The Natural Philosopher <a...@b.cwrote:
Easy way.
Seriously?
Replace the <A HREFwith a *div with its own click handler which simply
chains to another program. Although the event would bubble up to the
So, are you suggesting that one should put a DIV element where an
anchor
should be, and add an event handler to it, emulating a hyperlink
behavior?
containing div, my guess is that *it will execute the 'nearest' event
first, and since that cause the window to exit, you should escape before
it changes it. Or use the local event to set a flag which the outer
level event handler can read and use to modify its behaviour.
That's what "bubbling" means. The event is fired in the EventTarget,
and
then bubbles up in the DOM chain. But you guessed wrong, before the
default
action of clicking a hyperlink is triggered, the registered event
handlers
will fire and the event will bubble, thus making possible to prevent
the
default action - following the hyperlink - in the propagation phase.
In fact that may be simplest of all.
Again, seriously?
I guess that you're not worried with graceful degradation at all.
[snip]
Cheers
--
Gabriel Gilini
Thanks Rob and Gabriel. Putting the cancelProp in the link's onclick
worked like a charm.
Gabriel Gilini wrote:
On Nov 18, 8:52 am, The Natural Philosopher <a...@b.cwrote:
>Easy way.
Seriously?
>Replace the <A HREFwith a div with its own click handler which simply chains to another program. Although the event would bubble up to the
So, are you suggesting that one should put a DIV element where an
anchor
should be, and add an event handler to it, emulating a hyperlink
behavior?
If it fries yer bacon, why not?
>
>containing div, my guess is that it will execute the 'nearest' event first, and since that cause the window to exit, you should escape before it changes it. Or use the local event to set a flag which the outer level event handler can read and use to modify its behaviour.
That's what "bubbling" means. The event is fired in the EventTarget,
and
then bubbles up in the DOM chain. But you guessed wrong, before the
default
action of clicking a hyperlink is triggered, the registered event
handlers
will fire and the event will bubble, thus making possible to prevent
the
default action - following the hyperlink - in the propagation phase.
>In fact that may be simplest of all.
Again, seriously?
I guess that you're not worried with graceful degradation at all.
There's enough graceless degradation on most browsers to make me lose
little sleep over graceful..
[snip]
Cheers
--
Gabriel Gilini
On Nov 18, 12:44*pm, The Natural Philosopher <a...@b.cwrote:
Gabriel Gilini wrote:
On Nov 18, 8:52 am, The Natural Philosopher <a...@b.cwrote:
Easy way.
Seriously?
Replace the <A HREFwith a *div with its own click handler which simply
chains to another program. Although the event would bubble up to the
So, are you suggesting that one should put a DIV element where an
anchor
should be, and add an event handler to it, emulating a hyperlink
behavior?
If it fries yer bacon, why not?
You really have to ask?
>
containing div, my guess is that *it will execute the 'nearest' event
first, and since that cause the window to exit, you should escape before
it changes it. Or use the local event to set a flag which the outer
level event handler can read and use to modify its behaviour.
That's what "bubbling" means. The event is fired in the EventTarget,
and
then bubbles up in the DOM chain. But you guessed wrong, before the
default
action of clicking a hyperlink is triggered, the registered event
handlers
will fire and the event will bubble, thus making possible to prevent
the
default action - following the hyperlink - in the propagation phase.
In fact that may be simplest of all.
Again, seriously?
I guess that you're not worried with graceful degradation at all.
There's enough graceless degradation on most browsers to make me lose
little sleep over graceful..
What does that mean? This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: Matt |
last post by:
I created 3 hyperlinks, when the user click each link, it will change
the color of the text of a link. For example, when user clicks Link1,
text Link1 will become red color, but Link2 and Link3...
|
by: SomeGei |
last post by:
Hey guys....
i have a really big table... and the <tr> tags have onclick/onmouseover
events that highlight a row when you drag your mouse over it, and open a
popup window when you click anywhere...
|
by: Jamie Jackson |
last post by:
I know that it's possible to return false in an onClick to disable a
link. Is there a way to do this within the HREF attribute?
Something like:
<a href="javascript: return false;"> ?
Thanks,...
|
by: WindAndWaves |
last post by:
Hi Gurus and Folk
I have the following line of code:
<A HREF="#fac" CLASS="m" ONCLICK="showD('bas','fac');this.blur();return
false;">show information</A>
the showD function shows a div. ...
|
by: Jenny |
last post by:
I'm a javascript novice, but I have adapted an existing script, to move an
image across the a web page. I would like for the moving image to be a
link - by clicking on it would take the viewer to a...
|
by: Ivers |
last post by:
My C# asp.net app (.NET 1.1) can generate an email whose body contains a link
to the current page of the app.
When the recipient of the email clicks the link (usually from Outlook), the
app...
|
by: Conrad |
last post by:
Hi, it seems that I have the following issue when trying to create a
symbolic link within a script:
FROM COMMAND LINE: The owner is set to myself. Thus, it works.
FROM WEB PAGE: It doesn't...
|
by: whiteyoh |
last post by:
hi all,
im trying to get the following line to display a link to a URL which is stored in a MySql database, but its not!
$djname $genre and $biography all work fine..........what have i...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: marktang |
last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome a new...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| |